/**
  * @description: 订单列表中的订单元素
  * @author: yingying.fan
  * @date: 2019/2/25 17:02
  */
import React, { Component } from 'react'
import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'
import { px2dp, LogUtils } from 'rn-xiaobu-utils'
import OrderStoreItem from './OrderStoreItem'
import OrderOpBtnList from './OrderBtnList'
import OrderSkuItem from './OrderSkuItem'

type Props = {
  orderIndex?: number, // 订单序号
  orderInfo: Object, // 页面参数
  onPress?: Function // 订单点击跳转
}

export default class OrderItem extends Component<Props> {
  static defaultProps = {
    orderIndex: 0,
    orderInfo: {}
  }

  constructor (props) {
    super(props)

    this.state = {}
  }

  _getOrderStateDesc = (state) => {
    let status = ''
    switch (state) {
      case -3:
        status = '交易关闭'
        break
      case -2:
        status = '交易关闭'
        break
      case -1:
        status = '待付款'
        break
      case 0:
        status = '交易成功'
        break
      case 1:
        status = '待发货'
        break
      case 2:
        status = '已发货'
        break
      case 3:
        status = '待评价'
        break
      default:
        break
    }
    return status
  }

  _getStoreItem = (storeInfo, index, stateDesc) => {
    return (
      <OrderStoreItem
        key={'store' + index}
        orderState={stateDesc}
        storeInfo={storeInfo}
      />
    )
  }

  _getOrderOpBtns = () => {
    let opBtnListView
    if (this.props.orderInfo.OP && this.props.orderInfo.OP.length > 0) {
      opBtnListView = (<OrderOpBtnList
        orderIndex={this.props.orderIndex}
        orderInfo={this.props.orderInfo}
      />)
    }
    return (
      <View style={styles.btnContainer}>
        <Text style={styles.totalPrice}>合计：{this.props.orderInfo.PAY_FEE}</Text>
        {opBtnListView}
      </View>
    )
  }

  _getOrderStyle = () => {
    return styles.orderMarginTop
  }

  render () {
    let storeList = this.props.orderInfo.STORE_ORDER
    let stateDesc = this._getOrderStateDesc(this.props.orderInfo.ORDER_STATE)
    return (
      <View style={[styles.container, this._getOrderStyle()]}>
        <TouchableOpacity
          activeOpacity={1}
          onPress={this.props.onPress}>
          {
            storeList.map((storeInfo, index) => {
              return this._getStoreItem(storeInfo, index, stateDesc)
            })
          }
        </TouchableOpacity>
        {this._getOrderOpBtns()}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  orderMarginTop: {
    marginTop: px2dp(16)
  },
  container: {
    backgroundColor: '#ffffff'
  },
  wrapper: {
    width: px2dp(690)
  },
  totalPrice: {
    flex: 1,
    color: '#333333',
    fontSize: px2dp(28)
  },
  btnContainer: {
    // justifyContent: 'center',
    flexDirection: 'row',
    alignItems: 'center',
    height: px2dp(100),
    paddingHorizontal: px2dp(30),
    borderStyle: 'solid',
    borderTopColor: '#dddddd',
    borderTopWidth: px2dp(1)
  }
})